<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #tab{
            margin: 0 auto;
            width: 100px;
            text-align: left;
        }
        #tou{
            width: 100%;
            height: 33%;
            background-color: #ccc;
        }
        #cnt{
            display: none;
            height: 67%;
        }
        #cnt>div:nth-of-type(1){
             height: 50%;
         }
        #cnt>div:nth-of-type(2){
            height: 50%;
        }
    </style>
</head>
<body style="background-color: pink">
<div class="tab" id="tab">
    <div id="tou" class="tou">
        <span>我的淘宝</span>
    </div>
    <div id="cnt" class="cnt">
        <div id="a">已买到的宝贝</div>
        <div id="b">我的足迹</div>
    </div>
</div>
<script>

    tab.onmouseover=function () {
        cnt.style.display="block";
        tab.style["background-color"]="white";
        tou.style["background-color"]="white";
        a.onmouseover=function(){
            a.style["background-color"]="gainsboro";
        };
        a.onmouseout=function(){
            a.style["background-color"]="white";
        };
        b.onmouseover=function(){
            b.style["background-color"]="gainsboro";
        };
        b.onmouseout=function(){
            b.style["background-color"]="white";
        };
        tab.onmouseout=function () {
            cnt.style.display="none";
            tou.style["background-color"]="#ccc";
        }
    }
</script>
</body>
</html>